<template>
<mu-carousel :transition="transition" :interval="time" :style="{'height': height}">
    <mu-carousel-item v-for="item in data" :key="item.id">
        <router-link :to="'/newsDetail/' + item.id" tag="div" class="carousel-item">
            <img :src="item.banner_pic">
        </router-link>
    </mu-carousel-item>
</mu-carousel>
</template>
<style lang="scss">
.mu-carousel {
    .mu-carousel-item {
        .carousel-item {
            width: 100%;
            height: 100%;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>
<script>
export default {
    // 接受属性
    // props: ['imgs', 'height', 'time']
    props: {
        data: Array,
        height: String,
        time: {
            default: 3000
        },
        transition: {
            default: 'slide'
        }
    }
}
</script>